import styled from 'styled-components'
export const CateListWrapper = styled.div`
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  
  
`
export const ItemWrapper = styled.div`
    cursor:pointer;
    width:70px;
    height:70px;
    border:${props => props.isActive? '2px solid rgb(213,127,125)':'none'};
    border-radius:5px;
    margin:15px;
    position:relative;
    .icon{
      background: url(${props => props.imgUrl}) no-repeat ${props => props.isActive ? '-48px 0' :''}; 
      width:48px;
      height:48px;
      position: absolute;
      top:40%;
      left:50%;
      transform:translate(-50%,-50%);
    }
    .name{
      text-align:center;
      margin-top:48px;
      color:#888;
    }
    &:hover{
      background-color:rgba(100,100,100,.1);
    }
`